<!--
  功能：公共的头部
  时间：2022年11月04日 18:16:42
  版本：v1.0
-->
<template>
    <div>
        <transition>
      <span
              @click="setIsCollapse"
              :class="_isCollapse?'sideCollapse':'sideNotCollapse'"
              class="nav-ctrl-btn el-icon-s-operation">
    </span>
        </transition>
        <nav>
            <router-link to="/a" tag="el-button">奥里给</router-link>
            <router-link to="/" tag="el-button">Home</router-link>
            <router-link to="/about" tag="el-button">About</router-link>
            <el-button @click="updateIndexTag">修改全局共享数据</el-button>
            <el-button @click="testLogin">测试登录</el-button>
            <el-button @click="testCookie">测试携带cookie</el-button>
            <el-button @click="testLogout">测试退出登录</el-button>
        </nav>
        <img alt="Vue logo" src="@/assets/logo.png"/>
    </div>
</template>

<script>
import {MessageBox} from "element-ui";

//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import {mapGetters, mapMutations} from "vuex";
import {now} from "@/plugins/dayjs";
import {auth} from "@/plugins/request";

export default {
    // 组件名称
    name: "Head",
    // 组件参数 接收来自父组件的数据
    props: {},
    // 局部注册的组件,import引入的组件需要注入到对象中才能使用
    components: {},
    // 组件状态值
    data() {
        return {};
    },
    // 计算属性
    computed: {
        ...mapGetters(["_tag", "_isCollapse"]),
    },
    // 侦听器
    watch: {},
    // 组件方法
    methods: {
        updateIndexTag() {
            this._updateIndexTag(this._tag + 1);
        },
        setIsCollapse() {
            this._setIsCollapse(!this._isCollapse)
        },
        async testLogin() {
            let res = await this.$axios({
                method: "post",
                url: "/api/login",
                data: {
                    username: "admin",
                    password: "123456",
                },
            });
            await MessageBox.alert(JSON.stringify(res), "", {
                title: "登录信息",
                showCloseL: false,
            });
        },
        async testCookie() {
            let res = await auth()
            await MessageBox.alert(JSON.stringify(res), "", {
                title: "cookie",
                showCloseL: false,
            });
        },
        ...mapMutations(["_updateIndexTag", "_setIsCollapse"]),
        async testLogout() {
            let defaultParams = {
                method: "post",
                url: "/api/logout",
            }
            let res = await this.$axios(defaultParams)
            let  rawLocation = {
                name: "login",
                params: {
                    time: now,
                    rePath: this.$route.path,
                },
            }


            if (res.status && res.status === 200){
                let res2 = await this.$router.replace(rawLocation)
                this.$store.commit('removeToken')
            }else{
                await MessageBox.alert('网络异常，所以退出登录是不安全的请等待网络恢复后重新退出','错误提示')
            }


        },
    }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<!--使用了scoped属性之后，父组件的style样式将不会渗透到子组件中，-->
<!--然而子组件的根节点元素会同时被设置了scoped的父css样式和设置了scoped的子css样式影响，-->
<!--这么设计的目的是父组件可以对子组件根元素进行布局。-->
<style scoped>
.nav-ctrl-btn {
    float: left;
    line-height: 60px;
    transform: scale(2.0);
    color: #f40;
    transition: all 0.3s;
}

.sideCollapse {
    width: 0;
}

.sideNotCollapse {
    width: 200px;
}

.sideNotCollapse::before {
    padding: 3px;
    background: #aaa;
    border-radius: 20%;
}

img {
    width: 30px;
    height: auto;
    position: fixed;
    right: 20px;
    top: 20px;
}
</style>
